<!--
 * @Author: hu_binbin
 * @Date: 2021-08-06 16:57:49
 * @LastEditTime: 2021-08-21 15:15:54
 * @Description: 归档详情页
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
            <template slot="header_icon">
				<van-image class="imgSize" width="23" height="23" @click="rfidBtn" :src="icon.rfid" />
                <van-image class="imgSize" width="20" height="20" @click="scanBtn" :src="icon.scan" />
			</template>
		</Theader>
        <div style="overflow-y: auto;height: 100%;padding-bottom: 2rem;">
            <!-- 描述-->
            <div class="des">
                <van-cell>
                    <template solt="title">
                        <div class="des-left">
                            <span class="green">完成</span>
                            <label class="des-left-la">下关变电站特殊巡视</label>
                        </div>
                    </template>
                    <template solt="default">
                        <div class="des-right bg-green green">
                            <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                            <span>运行规程</span>
                        </div>
                    </template>
                </van-cell> 
                <div class="des-per" style="margin-top: 0.7rem;">
                    <div class="des-per-f">巡视人员</div>
                    <div>唐晓东、周奎</div>
                </div>
                <div class="des-per">
                    <div class="des-per-f">巡视计划时间</div>
                    <div>2021/05/06 08:00</div>
                </div>
                <div class="des-per">
                    <div class="des-per-f">作业类型</div>
                    <div>特殊巡视</div>
                </div>
                <div class="des-que">
                    <div class="defect">
                        <label>未消除缺陷：</label>
                        <span>1</span>
                    </div>
                    <div class="hidden">
                        <label>未治理隐患：</label>
                        <span>1</span>
                    </div>
                </div>
            </div>
    
            <div class="tabs">
                <van-tabs  v-model="active" color="#0EB295" title-active-color="#0EB295" animated swipeable>
                    <van-tab class="tab-con" title="巡视记录">
                        <div class="tab-item">
                            <div class="content-title">
                                <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                                <span style="margin-left: 0.4rem;">巡视结果概况</span>
                            </div>
                            <div class="content-des">
                                <div>共巡视16个设备，进行1次红外测温记录;</div>
                                <div class="cont-hidden">共发现
                                    <span>未消除缺陷：</span>
                                    <label>1个</label>
                                </div>
                                <div class="cont-defect">
                                    <span>缺陷内容:</span>
                                    <label>开关室一掌灯不亮</label>
                                </div>
                            </div>
                            <div class="cont-img">
                                <van-image :src="icon.iconTitle" width="80" height="80"></van-image>
                                <van-image :src="icon.iconTitle" width="80" height="80"></van-image>
                                <van-image :src="icon.iconTitle" width="80" height="80"></van-image>
                            </div>
                            <div style="margin: 15px;border-radius: 5px;">
                                <van-field class="textarea-content" disable v-model.trim="taskDetail.remark" rows="2" autosize type="textarea"
                                    placeholder="一二次设备全面巡视,巡视无异常">
                                    <template slot="right-icon">
                                        <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                                    </template>
                                </van-field>
                            </div>
                        </div>    
                    </van-tab>
                    <van-tab class="tab-con" title="缺陷记录">
                        <div>缺陷记录</div>
                    </van-tab>
                    <van-tab class="tab-con" title="隐患记录">
                        <div>隐患记录</div>
                    </van-tab>
                </van-tabs>
            </div>
            <!-- 基本信息 巡视信息-->
            <van-collapse class="collapse" v-model="activeNames">
                <van-collapse-item name="1">
                  <template slot="title">
                    <div class="col-title">
                        <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                        <span style="margin-left: 0.4rem;">基本信息</span>
                    </div>
                  </template>
                    <div class="lable-list">
                        <van-field 
                            label="变电站名称:"  
                            readonly 
                            :border="false"
                            v-model="taskDetail.substationName"
                        />
                        <van-field 
                            label="电压等级:" 
                            readonly 
                            :border="false"
                            v-model="taskDetail.voltageLevel" 
                        />
                        <van-field 
                            label="巡视日期:" 
                            readonly 
                            :border="false" 
                            v-model="taskDetail.patrolTypeName" 
                        />
                        <van-field 
                            label="变电站类型:" 
                            readonly 
                            :border="false"
                            v-model="taskDetail.voltageLevel" 
                        />
                        <van-field 
                            label="巡视类型:" 
                            readonly 
                            :border="false" 
                            v-model="taskDetail.patrolTypeName" 
                        />
                        <van-field 
                            label="是否使用巡检仪器:" 
                            readonly 
                            :border="false" 
                            v-model="taskDetail.patrolTypeName" 
                        />
                        <van-field 
                            label="巡视班组:" 
                            readonly 
                            :border="false" 
                            v-model="taskDetail.patrolTypeName" 
                        />
                        <van-field 
                            label="巡视人员:" 
                            readonly 
                            :border="false" 
                            v-model="taskDetail.patrolTypeName" 
                        />
                        <van-field 
                            label="巡视方式:" 
                            readonly 
                            :border="false" 
                            v-model="taskDetail.patrolTypeName" 
                        />
                    </div>
                </van-collapse-item>
                <van-collapse-item title="标题2" name="2" >
                    <template slot="title">
                        <div class="col-title">
                            <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                            <span style="margin-left: 0.4rem;">巡视记录</span>
                        </div>
                    </template>
                    <div class="re-time">
                        <div class="re-time-t">
                            <div class="rit">实际巡视开始时间</div>
                            <van-button color="#17B49B" size="mini" type="primary">2021/04/21 12:00:00</van-button>
                        </div>
                        <div class="re-time-t">
                            <div class="rit">实际巡视开始时间</div>
                            <van-button color="#17B49B" size="mini" type="primary">2021/04/21 12:00:00</van-button>
                        </div>
                    </div>
                    <div class="re-time">
                        <div class="re-time-t" >
                            <div class="rit">天气</div>
                            <van-button color="#17B49B" style="width: 100%;" size="mini" type="primary">晴</van-button>
                        </div>
                        <div class="re-time-t">
                            <div class="rit">温度</div>
                            <van-button color="#17B49B" style="width: 100%;" size="mini" type="primary">23℃</van-button>
                        </div>
                    </div>
                    <div>
                        <div>缺陷照片</div>
                        <div class="cont-img">
                            <van-image  :src="icon.iconTitle" width="80" height="80"></van-image>
                            <van-image :src="icon.iconTitle" width="80" height="80"></van-image>
                            <van-image :src="icon.iconTitle" width="80" height="80"></van-image>
                        </div>
                    </div>
                    <div>
                        <div>缺陷视屏</div>
                        <div class="cont-img">
                            <van-image :src="icon.iconTitle" width="80" height="80"></van-image>
                            <van-image :src="icon.iconTitle" width="80" height="80"></van-image>
                            <van-image :src="icon.iconTitle" width="80" height="80"></van-image>
                        </div>
                    </div>
                    <div>
                        <div>缺陷音频</div>
                        <van-button color="#17B49B" style="width: 60%;" icon="bullhorn-o" size="mini" type="primary">65＂</van-button>
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "specialTourDetail",
		components:{
			Theader
		},
		data() {
			return {
                active: 0,
                title: "特殊巡视",
                taskDetail: {
                    substationName:"东善桥变",
                    voltageLevel:"500Kv",
                    patrolTypeName:"全面巡视",
                    cycleTime:"2月",
                    fristTime:"2021/07/07 18:30:00",
                    team:"变电运维一班",
                    tourWay:"人工巡视",
                    planTime:"2021/07/07 18:30:00",
                    nextTime:"2021/07/07 18:30:00",
                    require:"的撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
                },
                icon: {
                    iconTitle: require("../../../../assets/tour/icon-title.png"),
                    rfid: require("../../../../assets/tour/icon-rfid.png"),
                    scan:require('../../../../assets/tour/icon-scan.png'),
                },
                activeNames: ['1'],
			}
		},
		computed: {

		},
		methods: {
            
            back(){
                this.$router.go(-1)
            },
            //rifid 
            rfidBtn() {

            },
            //扫描二维码
            scanBtn() {

            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
    .green{
        color:#1FB69F;
    }
    .bg-green{
        background:#E7F7F5;
    }
	.bg_4dbfae{
		background: #F5F6F7 ;
    }
    .des{
        border-radius: 0.7rem;
        margin: 0.7rem;
        margin-top: 3.7rem;
        background:#fff;
        padding-bottom: 0.5rem;
    }
    .des .van-cell{
        border-radius: 0.7rem;
        font-size:15px;
        padding-right:0px
    }
    .des .van-cell__value{
        display:flex;
        align-items: center;
    }
    .des .des-left{
        flex:1;
    }
    .des .des-left-la{
        color:#333;
        font-weight:bold;
    }
    .des .des-right{
        font-size:0.875rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6rem;
        height: 2rem;
        border-radius: 0.5rem 0 0 0.5rem;
    }
    .des .des-per{
        font-size: 0.875rem;
        margin-left: 1rem;
        margin-bottom: 0.7rem;
    }
    .des .des-per .des-per-f{
        color:#999;
        margin-bottom: 0.5rem;
    }
    .des .des-que{
        display:flex;
        margin-left: 1rem;
        font-size:0.75rem;
        margin-bottom: 1rem;
    }
    .des .des-que .defect{
        color:#F3757A;
    }
    .des .des-que .hidden{
        margin-left:1rem;
        color:#FFB56C;
    }
    .tabs{
        background: #fff;
        margin: 0.7rem;
        border-radius: 0.7rem;
    }
    .tabs .van-tabs__wrap{
        border-radius: 0.7rem;
    }
    .tab-item{
        font-size: 0.875rem;
    }
    .tab-item .content-des{
        color:#999;
    }
    .content-des{
        margin-left: 1rem;
    }
    .content-des div{
        margin-bottom: 0.5rem;
    }
    .content-des .cont-hidden label,
    .content-des .cont-hidden span{
        color:#EF6464;
    }
    .content-des .cont-defect{
        color:#666;
    }
    .cont-img{
        margin: 1rem 0.5rem;
        display: flex;
        justify-content: space-between;
    }
    .textarea-content{
        color:#333;
        font-size:0.875rem;
		border: 1px solid #E2E2E2;color:#999;
        padding-bottom: 1.5rem;
    }
    .textarea-content /deep/ .van-field__right-icon{
        position: absolute;
        bottom: -0.2rem;
        right: 0.5rem;
    }
    .content-title{
        display: flex;
        padding: 1rem 0;
        margin: 0px 1rem;
        align-items: center;
        background: #fff;
        font-size: 15px;
        font-weight: bold;
    }
    .collapse{
        margin: 0.7rem;
        border-radius: 0.7rem;
    }
    .van-collapse-item{
        margin-bottom: 0.5rem;
    }
    .collapse .van-collapse-item /deep/ .van-cell{
        border-radius: 0.7rem;
    }
    .col-title{
        display: flex;
        align-items: center;
    }
    .collapse /deep/ .van-field__control{
        text-align: right;
    }
    .collapse .lable-list /deep/ .van-cell{
        padding: 10px 0px;
    }
    .re-time{
        display: flex;
        font-size: 12px;
        margin-bottom: 1rem;
        justify-content: space-between;
    }
    .re-time .re-time-t{
        width: 45%;
        margin: 0.5rem;
    }
    .re-time .re-time-t .rit{
        margin-bottom: 0.5rem;
    }
    .btn{
        width: 80%;
        margin: auto;
        margin-top: 1.5rem;
    }
    
</style>
